import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
} from 'react-native';

import CommonChatItemView from '../common/CommonChatItemView';
import SizeUtils from '../../common/SizeUtils';
import Config from '../../config';
import {DateUtils} from '../../utils/Utils';
import TImage from '../../components/TImage';
import CommonAvatarView from '../common/CommonAvatarView';

const VIEW_PADDING_LEFT_RIGHT = 63;
const AVATAR_SIZE = 90;

export default class UserNoticeChatItemView extends CommonChatItemView {
    constructor(props) {
      super(props);

      this.state.userData = {avatar_url:""}

      this._viewWith = SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(VIEW_PADDING_LEFT_RIGHT * 2);
    }

    shouldComponentUpdate(nextProps, nextState) {
      return nextState.visible != this.state.visible ||
        nextState.delayFinish != this.state.delayFinish ||
        nextProps.data.news_id != this.props.data.news_id || //news
        nextProps.data.post_id != this.props.data.post_id; //posts
    }

    componentWillUpdate(nextProps, nextState) {
      if(nextState.isResponeUpdate === true) {
        nextState.isResponeUpdate = false;
      }
    }

    _getOtherAvarta() {
      return this.props.noticeData.icon;
    }

    _checkIsSelf() {
      return this.props.data.isSelf;
    }

    _getUserData() {
      return {nick:""};
    }

    _getSelfAvarta() {
      return this.props.selfData.avatar_url;
    }

    _onPress() {
      if(this.props.noticeData.key === "quanzi_post") {
        this.gotoPage(Config.pages.quanzi_post_content, this.props.data);
      }
      else if(this.props.noticeData.key === "news") {
        this.gotoPage(Config.pages.news_content, this.props.data);
      }
      else if(this.props.noticeData.key === "huiyuan") {
        this.gotoPage(Config.pages.vipactivitycontentpage, this.props.data);
      }
      else if(this.props.noticeData.key === "zahupu_post") {
        this.gotoPage(Config.pages.zhp_content, this.props.data);
      }
    }

    _renderTop() {
      if(this.props.checkShowTime(this.props.data) === true) {
        return (
          <View style={{flex:1, height:SizeUtils.translateDesignHeightToCode(44),
                flexDirection:"row", justifyContent:"center", alignItems:"center",
                marginBottom:SizeUtils.translateDesignHeightToCode(32), backgroundColor:"#00000000"}}>
            <View style={{width:SizeUtils.translateDesignWidthToCode(184), height:SizeUtils.translateDesignHeightToCode(44),
                backgroundColor:"#cfcfcf", borderRadius:SizeUtils.translateDesignNumToCode(20),
                flexDirection:"row", justifyContent:"center", alignItems:"center",}}>
              <Text style={{width:SizeUtils.translateDesignWidthToCode(184), backgroundColor:"#00000000",
                  color:"#ffffff", fontSize:SizeUtils.translateFontSizeToCode(24), textAlign:"center"}}>
                {this._getTime()}
              </Text>
            </View>
          </View>
        )
      }
    }

    _getTime() {
      var timeStr = "";
      if(this.props.noticeData.key === "quanzi_post") {
        timeStr = "commented_at";
      }
      else if(this.props.noticeData.key === "news" || this.props.noticeData.key === "huiyuan") {
        timeStr = "posted_at";
      }
      else if(this.props.noticeData.key === "zahupu_post") {
        timeStr = "commented_at";
      }
      if(timeStr === "") {
        return "00:00";
      }
      return DateUtils.formatDate2(this.props.data[timeStr], false);
    }

    render() {
      return (
        <View style={{width:SizeUtils.getWindowSize().width,
            paddingLeft:SizeUtils.translateDesignWidthToCode(VIEW_PADDING_LEFT_RIGHT),
            paddingRight:SizeUtils.translateDesignWidthToCode(VIEW_PADDING_LEFT_RIGHT),
            paddingTop:SizeUtils.translateDesignHeightToCode(32),
            overflow:'hidden', flexDirection:"column",
            backgroundColor:"#ffffff"}}>
            {this._renderTop()}
            {this._renderView()}
        </View>
      )
    }

    _renderSelfView() {
      return (
        <View style={{flexDirection:"row", justifyContent:"flex-end",
            width:this._viewWith,
          }}>
          <View style={{marginTop: SizeUtils.translateDesignHeightToCode(15),
              paddingRight:SizeUtils.translateDesignWidthToCode(20),
              width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(VIEW_PADDING_LEFT_RIGHT * 2 + AVATAR_SIZE),}}>
              <TouchableOpacity style={{
                backgroundColor: "#eeeeee",
                width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(VIEW_PADDING_LEFT_RIGHT * 2 + 100),
                paddingTop:SizeUtils.translateDesignHeightToCode(26),
                paddingLeft:SizeUtils.translateDesignWidthToCode(22),
                paddingBottom:SizeUtils.translateDesignHeightToCode(20),
                paddingRight:SizeUtils.translateDesignWidthToCode(20),
                borderRadius:SizeUtils.translateDesignNumToCode(10),
                justifyContent: 'center',
              }} onPress={this._onPress.bind(this)}>
                {this._renderContent()}
              </TouchableOpacity>
          </View>
          {this._renderSelfAvatar()}
        </View>
      )
    }

    _renderSelfAvatar() {
      if(this.state.visible === false || this.state.delayFinish === false) {
        return <CommonAvatarView avatarUri={""} size={90}/>;
      }
      return <CommonAvatarView avatarUri={this._getSelfAvarta()} size={90}/>;
    }


    _renderOtherView() {
      return (
        <View style={{flexDirection:"row", width:this._viewWith,
          }}>
          {this._renderOtherAvatar()}
          <View style={{paddingLeft:SizeUtils.translateDesignWidthToCode(30),}}>
             <TouchableOpacity style={{
               width:this._viewWith - SizeUtils.translateDesignWidthToCode(AVATAR_SIZE + 30),
               backgroundColor: "#eeeeee",
               paddingTop:SizeUtils.translateDesignHeightToCode(23),
               paddingLeft:SizeUtils.translateDesignWidthToCode(23),
               paddingBottom:SizeUtils.translateDesignHeightToCode(10),
               borderRadius:SizeUtils.translateDesignNumToCode(20),
               borderColor: '#cccccc',
               borderWidth: SizeUtils.translateDesignNumToCode(3),
               justifyContent: 'center',
             }} onPress={this._onPress.bind(this)}>
               {this._renderContent(this._viewWith - SizeUtils.translateDesignWidthToCode(AVATAR_SIZE + 30 + 23 * 2))}
             </TouchableOpacity>
           </View>
        </View>
      )
    }

    _renderOtherAvatar() {
      return (
        <View style={{width:SizeUtils.translateDesignWidthToCode(AVATAR_SIZE)}}>
          <TImage source={this._getOtherAvarta()} style={{width:AVATAR_SIZE, height:AVATAR_SIZE}} />
        </View>
      )
    }

    _renderContent(contentWidth) {
      return (
        <View style={{flexDirection:"column"}}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(30),
              color:"#333333", fontWeight:"bold"}}>
            {this._getContent()}
          </Text>
          <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(19)}}>
            {this._renderShowImage(contentWidth)}
          </View>
        </View>
      )
    }

    _getContent() {
      if(this.props.noticeData.key === "quanzi_post" || this.props.noticeData.key === "zahupu_post") {
        return "帖子标题: " + this.props.data.post_title + "\n"
         + "回复人: " + this.props.data.by_name + "\n"
         + "回复时间: " + DateUtils.formatDate2(this.props.data.commented_at)+ "\n"
         + "回复内容: " + this.props.data.content;
      }
      else if(this.props.noticeData.key === "news" || this.props.noticeData.key === "huiyuan") {
        return this.props.data.title;
      }
      return "";
    }

    _renderShowImage(contentWidth) {
      let imageWidth = 0;
      if(this.props.data.image_urls == undefined || this.props.data.image_urls.length === 0) {

      }
      else if(this.props.data.image_urls.length < 3) {
        return this._renderOneImage(this.props.data, contentWidth);
      }
      else if(this.props.data.image_urls.length == 3) {
        imageWidth = (contentWidth - SizeUtils.translateDesignWidthToCode(30 * 2))/3;
        return (
          <View style={{flexDirection:"row",
              justifyContent:"space-around"}}>
            {this._renderThreeImage(this.props.data, imageWidth)}
          </View>
        );
      }
    }

    _renderOneImage(data, imageWidth) {
      //相对NewListItemView的尺寸做缩放
      return (
        <View style={{width:imageWidth, flexDirection:"row"}}>
          <TImage source={{uri:data.image_urls[0]}} style={{width:imageWidth, height:imageWidth / 670 * 300}}
            isMini={true} miniSize={"mini500"} translatedSize={true}/>
        </View>
      )
    }

    _renderThreeImage(data, imageWidth) {
      return data.image_urls.map((url, index) => {
        return <TImage key={index} source={{uri:url}} style={{width:imageWidth, height:imageWidth / 204 * 140}}
          isMini={true} miniSize={"mini200"} translatedSize={true}/>
      })
    }

    _renderTime() {
      return (
        <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(40),
            paddingLeft:SizeUtils.translateDesignWidthToCode(20),
            paddingRight:SizeUtils.translateDesignWidthToCode(20),}}>
          <Text style={{color:"#999999", fontSize:SizeUtils.translateFontSizeToCode(24)}}>

          </Text>
        </View>
      )
    }
}
